<template>
  <div class="box">
    <el-card class="page-tools">
    <el-row type="flex" justify="space-between" align="middle" class="rowFlex">
      <el-col>
        <div class="before">
          <!-- 定义前面得插槽 -->
          <template>
            <div>
              <el-input v-model="params.username"  size="small" style="width:140px" placeholder="根据用户名搜索"></el-input>
              <el-button size="small" class="koo" @click="empty">清空</el-button>
              <el-button type="primary" size="small" @click="getUserList">搜索</el-button>
            </div>
          </template>
          <!-- <slot name="before" /> -->
        </div>
      </el-col>
      <el-col>
        <el-row type="flex" justify="end">
          <!-- 定义后面的插槽 -->
          <el-button type="success" size="small" @click="classList"><i class="el-icon-edit" /> 新增用户 </el-button>
          <slot name="after" />
        </el-row>
      </el-col>
    </el-row>
    <div class="alertSpan">
      <el-alert :closable="false">
        <i class="el-icon-info" />
        <span> 共{{counts}}条记录</span>
      </el-alert>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%" >
       <el-table-column prop="id" label="序号"></el-table-column>
       <el-table-column prop="email" label="邮箱"></el-table-column>
       <el-table-column prop="phone" label="联系电话" > </el-table-column>
       <el-table-column prop="username" label="用户名"></el-table-column>
       <el-table-column prop="permission_group_title" label="权限组名称"></el-table-column>
       <el-table-column  prop="role" label="角色"> </el-table-column>
         <el-table-column label="操作" >
           <template #default="{ row }">
            <el-button type="primary" icon="el-icon-edit" v-if="row.id!==2" circle plain @click="redact(row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" v-if="row.id!==2" circle plain @click="remove(row)"></el-button>
      </template>
       </el-table-column>
       </el-table>
       </div>
    <el-dialog :title="title" :visible.sync="addVisible" width="50%"  @close="handleClose">
       <el-form ref="datasRef" label-width="100px" :model="datas" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="datas.username" ></el-input>
        </el-form-item>
           <el-form-item label="邮箱" prop="email">
          <el-input v-model="datas.email" ></el-input>
        </el-form-item >
           <el-form-item label="密码" prop="password" v-if="title !=='编辑用户'">
          <el-input v-model="datas.password" ></el-input>
        </el-form-item>
           <el-form-item label="角色" prop="role">
          <el-input v-model="datas.role"></el-input>
        </el-form-item>
        <el-form-item label="权限组名称" prop="permission_group_id">
          <el-select v-model="datas.permission_group_id" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.username"
              :value="item.id"
             >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="datas.phone"></el-input>
        </el-form-item>
          <el-form-item label="介绍" prop="introduction">
            <el-input
             type="textarea"
             placeholder="请输入内容"
             v-model="datas.introduction"
             show-word-limit>
            </el-input>
          </el-form-item>
         <el-form-item style="text-align:center;">
          <template #default="{ row }">
          <el-button @click="handleClose">取消</el-button>
           <el-button type="primary" @click="addHandle(row)">确定</el-button>
           </template>
        </el-form-item>
       </el-form>
       </el-dialog>
    <!--  分页 -->
        <el-pagination style="text-align: right;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="params.pagesize"
      layout=" sizes, prev, pager, next, jumper"
      :total="counts">
    </el-pagination>
  </el-card>
  </div>
</template>

<script>
import { list, simple, remove, add, detail, update } from '@/api/base/users'
export default {
  data () {
    return {
      options: [],
      value: '',
      textarea: '',
      title: '',
      tableData: [],
      counts: null,
      addVisible: false,
      params: {
        page: 1, // 当前页数
        pagesize: 10, // 页尺寸
        keyword: '',
        disabled: '',
        username: ''
      },
      datas: {
        avatar: '',
        email: '',
        introduction: '',
        password: '',
        permission_group_id: '',
        phone: '',
        role: '',
        username: ''
      },
      rules: {
        password: [{ required: true, message: '请输入', trigger: 'blur' }],
        username: [{ required: true, message: '请输入', trigger: 'blur' }],
        email: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      boolean: false,
      id: ''
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    // 搜索
    async getUserList () {
      const res = await list(this.params)
      // console.log(res.data.list)
      this.tableData = res.data.list
      this.counts = res.data.counts
      this.username = res.data.list.username
    },
    // 清空
    empty () {
      this.params.username = ''
      this.getUserList()
    },
    // 删除
    async remove (id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(id)
        this.$message.success('删除成功!')
        this.getUserList()
      } catch (error) {
        console.log(error)
      }
    },
    // 编辑用户
    async redact (id) {
      this.addVisible = true
      this.title = '编辑用户'
      this.id = id
      // 获取数据
      const resd = await simple()
      const awe = await detail(id)
      // console.log(awe)
      // console.log(resd)
      this.datas = awe.data
      this.options = resd.data
    },
    // 分页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.params.page = val
      this.getUserList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.params.pagesize = val
      this.getUserList()
    },
    // 用户确定
    addHandle (id) {
      try {
        this.$refs.datasRef.validate(async valid => {
        // eslint-disable-next-line no-useless-return
          if (this.title === '创建用户') {
            await add(this.datas)
            this.$message.success('添加成功!')
          }
          if (this.title === '修改用户') {
          // 提交编辑
            const editForm = {
              avatar: '',
              email: '',
              introduction: '',
              id: this.id,
              permission_group_id: 2,
              phone: '',
              role: '',
              username: ''
            }
            await update(editForm)
            this.$message.success('修改成功')
          }
          this.addVisible = false
          this.getUserList()
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 用户取消
    handleClose () {
      this.$emit('close')
      this.$refs.datasRef.resetFields()
      this.addVisible = false
    },
    // 用户添加
    async classList () {
      this.addVisible = true
      this.title = '创建用户'
      // 权限组名称
      const resd = await simple()
      this.options = resd.data
    }
  }
}
</script>

<style scoped lang='scss'>
.page-tools {
    margin: 10px 0;
    .before {
      line-height: 34px;
    i {
      margin-right: 5px;
      color: #409eff;
    }
    display: inline-block;
    padding: 0px 10px;
    border-radius: 3px;
  }
 }
 .box{
  padding: 20px;
}
.alertSpan {
    margin-bottom: 20px;
}
.koo {
    margin-left: 15px;
}
.rowFlex{
    margin-bottom: 20px;

}
.el-pagination{
  margin-top:15px
}
</style>
